<!DOCTYPE HTML>
<html>
	<head>
		<title>登录</title>
		<meta charset="utf-8"/>
		<link href="/static/css/bootstrap.min.css" rel="stylesheet">
		<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0" />
		<link rel="shortcut icon" href="./static/img/favicon.ico" type="image/x-icon">

		<script src="/static/js/jquery-3.6.0.min.js"></script>
		<script src="/static/js/bootstrap.min.js"></script>
		
	</head>
	<body>
		
		<div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
			<div class="modal-dialog">
			  <div class="modal-content">
				<div class="modal-header">
				  <h5 class="modal-title" id="staticBackdropLabel">提示</h5>
				</div>
				<div class="modal-body">
				  登录成功
				</div>
				<div class="modal-footer">
				  <button type="button" id="loginBtn" class="btn btn-secondary" data-bs-dismiss="modal" >现在登录</button>
				</div>
			  </div>
			</div>
		  </div>
		  <div class="container text-center m-1 p-1">
			<div class="form-group m-1">
				<div class="container-fluid">
					<input type="text" class="form-control-lg col-12" placeholder="用户名(字母或数字)" maxlength="20" id="user"/>
				</div>
			</div>
			
			<div class="form-group m-1">
				<div class="container-fluid">
					<input type="password" class="form-control-lg col-12" placeholder="密码" maxlength="20" id="pwd"/>
				</div>
			</div>
			
			<div class="form-group m-1">
				<div class="container-fluid">
					<button type="submit" class="btn btn-primary mx-auto" id="subm">登录</button>
				</div>
			</div>
		  </div>
		
		<script type="text/javascript" >
			var url="/backend/api/login";
			$(document).ready(function(){
				const modelTip = new bootstrap.Modal(document.getElementById('staticBackdrop'), {});
				const docTip = document.getElementById('staticBackdrop');
				const loginBtn = document.getElementById('loginBtn');
				$("#loginBtn").click(function () {
					if(loginBtn.textContent != "我知道了"){
						window.localStorage.setItem("user", $("#user").val());
						window.location.href = "https://2020cn.cn";
					}
				
				});
				
				$("#subm").click(function () {
					var user=$("#user").val();
					var pwd=$("#pwd").val();
					$.post(
						url,
						{
							"user" :user,
							"pwd"  :pwd
						},
						function (res) {

							docTip.addEventListener('show.bs.modal', event => {
				
								const modalTitle = docTip.querySelector('.modal-body');
								modalTitle.textContent = res=="success"?"登录成功":"登录失败";
								loginBtn.textContent = res=="success"?"现在登录":"我知道了";
							  })
						
							modelTip.show();
						}
					);
				});
			});
		</script>
	</body>
</html>